
//Jquery **获取一个元素的点击**
// 定义一个函数 名为$ 接收一个参数

/* 
function $(arg) {
  // 里面返回一个对象
  return {
    // 定义一个click方法 传递一个回调函数
    click(fn) {
      // 在里面获取元素
      const el = document.querySelector(arg)
      // 将获取的元素调用onclick方法
      el.onclick = function () {
        // 执行函数
        fn && fn()
        // 等同于下面 判断是否有参数传进来 
        // if(fn) {
        //   fn()
        // }
      }
    }
  }
} 
*/

// 等同于上面
/* class Jq {
  constructor(arg) {
  this[0] = document.querySelector(arg)
  }
  click(fn) {
    this[0].addEventListener('click',fn)
  }
}

function $(arg) {
  return new Jq(arg)
} */


// **多个节点的实现**
/* class Jq {
  constructor(arg) {
    // 获取多个节点
    let eles = document.querySelectorAll(arg)
    // 调用addEles方法
    this.#addEles(eles)
  }
  // 将获取的多个节点添加(保存)到this中去
  #addEles(eles) {
    for(let i = 0; i < eles.length; i++) {
      this[i] = eles[i]
    }
    // 将this当成数组，需要一个length
    this.length = eles.length
  }
  click(fn) {
    // 将this中的每个节点绑定事件
    for(let i = 0; i < this.length; i++) {
      this[i].addEventListener('click',fn)
    }
  }
}
function $(arg) {
  return new Jq(arg)
} */


// ##传入不同元素实现##
class Jq {
  constructor(arg) {
    // 传入的是一个字符串类型
    if (typeof arg === 'string') {
      let eles = document.querySelectorAll(arg)
      this.#addEles(eles)
      // 传入的是函数 
    }else if(typeof arg === "function") {
      // 文档已经完全加载HTML并构建DOM树，但外部引用资源尚未加载完毕
      document.addEventListener("DOMContentLoaded",arg)
      // 传入的是一个对象
    }else {
      // 判断传入的元素length长度，为undefined就是一个节点
      if(typeof arg.length === 'undefined') {
        this[0] = arg
        this.length = 1
      }else {
        // 多个节点
        this.#addEles(arg)
      }
    }
  }
  // 将获取的多个节点添加(保存)到this中去
  #addEles(eles) {
    for (let i = 0; i < eles.length; i++) {
      this[i] = eles[i]
    }
    // 将this当成数组，需要一个length
    this.length = eles.length
  }
  click(fn) {
    // 将this中的每个节点绑定事件
    for (let i = 0; i < this.length; i++) {
      this[i].addEventListener('click', fn)
    }
  }
}
function $(arg) {
  return new Jq(arg)
}